CSS [attribute|=”value”] Selector
The [attribute|=”value”] Selector This selector is used to select all the elements whose attribute has a hyphen-separated list of values beginning with the specified value. The value has to be a whole word either alone or followed by a hyphen.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Attribute selector</title>
<style>
[class|="gfg"] {
color: green;
font-size: 40px;
font-weight: bold;
text-align: center;
}
[class|="geeks"] {
font-size: 17px;
text-align: center;
margin-top: 0px;
}
</style>
</head>
<body>
<div class="gfg">w3wiki</div>
<div Class="geeks-ide">
A computer science portal for geeks
</div>
<div class="geeks-ide1">
w3wiki is coding platform
</div>
</body>
</html>
Output:
CSS Attribute Selector
The CSS Attribute Selector is a very useful approach that targets elements based on their specific attributes or attribute values. This allows for precise styling of HTML elements that share common attributes, enhancing the consistency and efficiency of your CSS code. Lets see how to work with CSS Attribute Selector.
Syntax:
[attribute]{
/* Styles*/
}
// OR
element [attribute] {
/* Styles*/
}
// OR
[attribute ="value "]
{
/* Styles*/
}
There are several types of attribute selectors which are discussed below:
Contact Us